<template>
    <el-drawer title="我是标题" :visible.sync="dialogVisible" :with-header="false" class="demand_box" size='600px' @close="closeGetData">
        <div class="flexbox flexcolumn height_100" v-loading="loading" element-loading-spinner="el-icon-loading" element-loading-background="rgba(0, 0, 0, 0)">
            <div class="demand_head flexbox flexcenter flexbetween">
                <span class="demand_title">消耗详情</span>
                <span class="icon_btn icon_btn_32"><img src="../../assets/img/close_check.svg" alt="" @click="closeGetData"></span>
            </div>
            <div class="pd_20 no_pb">
                <div class="step_box flexbox flexcenter flexbetween">
                    <div>
                        客户/投放渠道
                        <span>{{baseInfo.brand_name}}-{{filters.chanelName2(queryInfo.channel)}}{{filters.sceneFilter(queryInfo.business_scene)}}</span>
                    </div>
                    <div>
                        总消耗
                        <span class="cost_number">{{baseInfo.stat_cost}}</span>
                    </div>
                </div>
                <div class="mt_20 font_14 color_01">日度消耗</div>
            </div>
            <div class="demand_center flex">
                <el-table :data="tableData" class="com_table" height="100%">
                    <div slot="empty" class="flexbox flexcenter flexcolumn flexjust" style="height:300px">
                        <img src="../../assets/img/null_icon.svg" alt="">
                        <div class="font_13 color_03">暂无数据</div>
                    </div>
                    <el-table-column prop="batch_num" label="日期" min-width="110">
                    </el-table-column>
                    <el-table-column prop="free_cost" label="随心推" width="150" v-if="queryInfo.channel==1" key="qc1">
                        <template slot-scope="scope">
                            {{scope.row.free_cost?scope.row.free_cost:"0.00"}}
                        </template>
                    </el-table-column>
                    <el-table-column prop="stat_cost" label="消耗" width="150">
                        <template slot-scope="scope">
                            <div class="flexbox flexcenter popper_hover" v-if="queryInfo.business_scene==9" key="qc">
                                {{scope.row.stat_cost}}
                                <el-popover placement="top" width="160" @show="showCost(scope.row.stat_cost)">
                                    <el-input v-model="costValue" placeholder="" size="small"></el-input>
                                    <div style="text-align: right; margin-top: 10px">
                                        <el-button size="mini" type="text" @click="hidePop">取消</el-button>
                                        <el-button type="primary" size="mini" @click="editCost(scope.row)">确定</el-button>
                                    </div>
                                    <img src="../../assets/img/edit_icon2.svg" alt="" class="icon_btn icon_btn_width" slot="reference">
                                </el-popover>
                            </div>
                            <template v-else>
                                {{scope.row.stat_cost}}
                            </template>
                        </template>
                    </el-table-column>
                </el-table>
            </div>
        </div>
    </el-drawer>
</template>

<script>
import filters from "../../assets/js/filters";
import monthdate from '../../assets/js/getmonth'
export default {
    name: "",
    data() {
        return {
            loading:false,
            dialogVisible: false,
            freeValue:'',
            costValue:'',
            baseInfo:{
                brand_name:'',
                stat_cost:'',
            },
            queryInfo:{
                year: '',
                month: '',
                channel:'',
                business_scene:'',
                brand_id:'',
            },
            tableData: [],
        };
    },
    created() {

    },
    methods: {
        //获取列表
        async getDataList() {
            this.loading = true;
            const { data: res } = await this.$http.post(
                "launch/cost/prjCostDaytime",
                this.queryInfo
            );
            if (res.code !== 200) {
                this.loading = false;
                this.$message.error(res.msg);
                return;
            } else {
                this.loading = false;
                this.baseInfo.stat_cost = res.data.total_cost
                this.getTime(res.data.list,this.queryInfo.year,this.queryInfo.month)
            }
        },

        // 获取日期
        getTime(data,year,month){
            this.tableData = []
            let day = monthdate.currentMonthDays(year,month)
            for(let i in day){
                let date = data.filter(item=>{ return item.batch_num==day[i]}).map(item=>{return item.batch_num}).toString()
                let val = data.filter(item=>{ return item.batch_num==day[i]})[0]
                if(day[i]==date){
                    this.tableData.push(val)
                }else{
                    this.tableData.push({
                        batch_num: day[i],
                        free_cost: '0.00',
                        stat_cost: '0.00',
                        total_cost: '0.00',
                    })
                }
            }
        },


        showCost(val){
            this.costValue = val
        },


        hidePop() {
            document.body.click()
        },


        //填写消耗
        async editCost(row) {
            this.loading = true;
            const { data: res } = await this.$http.post(
                "launch/cost/prjEditCost",
                {
                    channel: 0,
                    business_scene: 9,
                    brand_id: this.queryInfo.brand_id,
                    batch_num: row.batch_num,
                    stat_cost: this.costValue,
                }
            );
            if (res.code !== 200) {
                this.loading = false;
                this.$message.error(res.msg);
                return;
            } else {
                this.loading = false;
                this.hidePop()
                this.$message({
                    message: "修改成功",
                    type: "success",
                });
                this.getDataList();
            }
        },
            
        // 关闭详情
        closeGetData(){
            this.$emit('getProData')
            this.$emit('getProTime')
            this.dialogVisible = false
        }
    },
    components: {

    },
};
</script>
<style scoped>
.step_box {
    height: 48px;
    background: rgba(165, 177, 209, 0.08);
    border-radius: 2px;
    padding: 0 20px;
    font-size: 14px;
    color: #616c85;
}
.step_box span {
    margin-left: 8px;
    color: #17233d;
}
.step_box .cost_number {
    font-family: D-DIN;
    font-weight: bold;
}
.icon_btn_width{
    width: 20px;
    height: 20px;
}
.no_pb{
    padding-bottom: 0;
}
.demand_center{
    padding-top: 12px;
}
</style>


